<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<!DOCTYPE html>
<html>
	<head>
		<title>排课管理</title>
		<meta name="decorator" content="default"/>
		
		<script type="text/javascript">
		$(function(){
			/* $('#year').change(function(){
				var year = $('option:selected', $('#year')).val();
				var week = $('option:selected', $('#week')).val();
				
				window.location.href = "${ctx}/qd/course?mode=week&year="+year+"&week="+week;
			});
			
			$('#week').change(function(){
				var year = $('option:selected', $('#year')).val();
				var week = $('option:selected', $('#week')).val();
				
				window.location.href = "${ctx}/qd/course?mode=week&year="+year+"&week="+week;
			}); */
			$('#week').change(function(){
				//var year = $('option:selected', $('#year')).val();
				var year = $('#year').val();
				var week = $('option:selected', $('#week')).val();
				
				window.location.href = "${ctx}/qd/course?mode=week&year="+year+"&week="+week;
			});
			
			$('#year').blur(function(){
				$.ajax({
					url:'${ctx}/qd/course/ajax?method=week',
					data:{year:$('#year').val()},
					success:function(res){
						var json = eval('('+res+')');
						
						var select = $('#week');
						select.empty();
						
						var index = 1;
						
						for(week in json){
							var infos = json[week].split(':');
							var opt = $('<option value="'+(index++)+'">'+infos[0]+'</option>');
							select.append(opt);
						}
						$('.rule-single-select').ruleSingleSelect();
					},
					error:function(res){
						jsprint('获取星期错误:'+res.responseText);
					}
				});
			});
			
			$('#changeTheme').click(function(){
				var href = $(this).attr('href');
				
				parent.dialog({
			        title: '提示',
			        content: '确定修改主题?',
			        okValue: '确定',
			        ok: function () {
			            window.location.href = href + '&l1='+ $('#l1').val() + '&lx=' + $('#lx').val();
			        },
			        cancelValue: '取消',
			        cancel: function () { }
			    }).showModal();
				return false;
			});
		});
		</script>
		
		<style type="text/css">
			.theme-list { display: inline-block; position: absolute; margin-left:200px;}
			.theme-list .l1,.l2,.btn-theme { float:left; }
			.theme-list a.wtext-skip {
				display: inline-block;
			    margin-left: -1px;
			    padding: 5px 15px 5px 13px;
			    line-height: 20px;
			    height: 20px;
			    border: solid 1px #eee;
			    color: #333;
			    font-size: 12px;
			    text-decoration: none;
			    background: #fafafa;
			    white-space: nowrap;
			    word-break: break-all;
		    }
		</style>
	</head>
	<body>
		<sys:message content="${message}"/>
		<!--导航栏-->
		<div class="location">
			<a href="javascript:history.back(-1);" class="back"><i></i><span>返回上一页</span></a>
			<a href="${ctx}/center" class="home"><i></i>
			<span>首页</span></a> 
			<i class="arrow"></i> 
			<span>排课管理</span>
		</div>
		<!--/导航栏-->
		
		<!--搜索栏-->
		<div id="floatHead" class="toolbar-wrap">
		    <div class="toolbar">
		        <div class="box-wrap">
		        	<input id="year" name="year" class="input normal" value="${year}" onfocus="WdatePicker({dateFmt:'yyyy'})" style="width:50px;text-align: center;"/>
		            <%-- <div class="rule-single-select single-select">
		                <select name="year" id="year">
	                    <c:forEach items="${yearList}" var="y">
	                    	<option value="${y}" <c:if test="${y==year}">selected="selected"</c:if>>${y}年</option>
	                    </c:forEach>
		                </select>
		            </div> --%>
		            <div class="rule-single-select single-select">
		                <select name="week" id="week">
		                    <c:forEach items="${weekList}" var="w">
	                    	<option value="${w.weekOfYear}" <c:if test="${w.weekOfYear==week}">selected="selected"</c:if>>${w.text()}</option>
	                    	</c:forEach>
		                </select>
		            </div>
		            <div class="week-list">
		                <ul class="wtexti-list">
		                 	<li>
		                        <a class="wtext-skip" href="${ctx}/qd/course?mode=week&year=${yearPre}&week=${weekPre}">
		                            <span>上周</span>
		                        </a>
		                    </li>
		                    <li>
		                        <a class="wtext-skip" href="${ctx}/qd/course?mode=week&year=${yearNow}&week=${weekNow}">
		                            <span>本周</span>
		                        </a>
		                    </li>
		                    <li>
		                        <a class="wtext-skip" href="${ctx}/qd/course?mode=week&year=${yearNext}&week=${weekNext}">
		                            <span>下周</span>
		                        </a>
		                    </li>
		                </ul>
		            </div>
		            <div class="theme-list">
		            	<div class="l1">
			            	<label>L1:</label>
			            	<div class="rule-single-select single-select">
				                <select name="l1" id="l1">
				                	<option>请选择</option>
				                    <c:forEach items="${l1}" var="l">
				                    	<option value="${l}">${l}</option>
				                    </c:forEach>
				                </select>
			            	</div>
		            	</div>
		            	<div class="l2">
		            		<label>L2-L6:</label>
		            		<div class="rule-single-select single-select">
				                <select name="lx" id="lx">
				                	<option>请选择</option>
			                    	<c:forEach items="${lx}" var="l">
				                    	<option value="${l}">${l}</option>
				                    </c:forEach>
				                </select>
				            </div>
		            	</div>
		            	<div class="btn-theme">
		            		<a id="changeTheme" class="wtext-skip" href="${ctx}/qd/course?action=theme&mode=week&year=${year}&week=${week}">
	                            <span>修改主题</span>
	                        </a>
		            	</div>
		            </div>
		            <div class="month-list" id="month-list">
		                <ul class="mtexti-list">
		                    <li>
		                        <a class="mtext-skip" href="${ctx}/qd/course?mode=month">
		                            <span>月课表</span>
		                        </a>
		                    </li>
		                    <li>
		                        <a class="mtext-skip mchosent-skip" href="#">
		                            <span>周课表</span>
		                        </a>
		                    </li>
		                    <li>
		                        <a class="mtext-skip" href="${ctx}/qd/course?mode=day">
		                            <span>日课表</span>
		                        </a>
		                    </li>
		                </ul>
		            </div>
		        </div>
		    </div>
		</div>
		<!--/搜索栏-->
		
		<!--选择栏-->
		<div class="select-warp" style="display:none;">
		   <ul class="acheck-list">
		       <li><label>年龄段</label></li>
		       <li class="ainputl-list"><input type="checkbox"/>L1</li>
		       <li class="ainputl-list"><input type="checkbox"/>L2</li>
		       <li class="ainputl-list"><input type="checkbox"/>L3</li>
		       <li class="ainputl-list"><input type="checkbox"/>L4</li>
		       <li class="ainputl-list"><input type="checkbox"/>L5</li>
		       <li class="ainputl-list"><input type="checkbox"/>L6</li>
		   </ul>
		   <ul class="acheck-list">
		       <li class="ainputl-list"><label>课程类型</label></li>
		       <li class="ainputl-list"><input type="checkbox"/>NK</li>
		       <li class="ainputl-list"><input type="checkbox"/>CC</li>
		       <li class="ainputl-list"><input type="checkbox"/>户外课程</li>
		   </ul>
		</div>
		<!--/选择栏-->
		
		<!--列表-->
		<div class="table-warp">
		    <table class="table_border" style="font-size: 12px; width:100%">
		        <c:forEach items="${courses}" var="r" varStatus="ri">
		        <c:if test="${ri.index==0}">
		        <thead>
		        	 <tr>
			        	<c:forEach items="${r}" var="c" varStatus="ci">
				            <th style="text-align: center;">${c}</th>
			        	</c:forEach>
		        	</tr>
		        </thead>
		        </c:if> 
		        <c:if test="${ri.index>0 }">
		        <tbody>
			         <tr>
			        	<c:forEach items="${r}" var="c" varStatus="ci">
				            <td style="text-align: center;">${c}</td>
			        	</c:forEach>
		        	</tr>
		        </tbody>
		        </c:if>
		        </c:forEach>
		    </table>
		</div>
		<!--/列表-->
	</body>
</html>
